<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AI 提问结果 · 审阅页 Demo</title>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: '#2563eb',
          line: '#e5e7eb',
          soft: '#f8fafc'
        },
        boxShadow: {
          card: '0 12px 40px rgba(15,23,42,.06)'
        }
      }
    }
  }
</script>
<style>
  /* 打印优化：展开所有 details，隐藏交互按钮，仅保留核心内容 */
  @media print {
    header, .no-print { display:none !important; }
    details { page-break-inside: avoid; }
    details[open] > summary { border-bottom: 1px solid #e5e7eb; margin-bottom: .5rem; }
    /* 让图片填满宽度，避免分页截断 */
    img { max-width: 100% !important; page-break-inside: avoid; }
    .page { box-shadow: none !important; border: none !important; }
  }
  /* 小增强：details 的箭头视觉 */
  summary::-webkit-details-marker{display:none}
  summary .caret::after{content:'▸'; display:inline-block; transition:.2s; margin-right:.5rem}
  details[open] summary .caret::after{transform:rotate(90deg)}
</style>
</head>
<body class="bg-soft text-slate-900">

<!-- ===== 顶部摘要区 ===== -->
<header class="bg-white sticky top-0 z-20 border-b border-line/80">
  <div class="mx-auto max-w-6xl px-6">
    <div class="flex flex-wrap items-center justify-between gap-4 py-4">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-brand/10 text-brand grid place-content-center text-lg font-semibold">G</div>
        <div>
          <div class="font-semibold leading-5">GEO Studio · AI 提问结果</div>
          <div class="text-xs text-slate-500 leading-4">审阅截图 + 文本 + 引用信源（可导出）</div>
        </div>
      </div>
      <!-- 导出按钮组 -->
      <div class="no-print flex flex-wrap items-center gap-2">
        <button class="rounded-lg border border-line bg-white px-3 py-2 text-sm hover:bg-slate-50" onclick="expandAll(true)">展开全部</button>
        <button class="rounded-lg border border-line bg-white px-3 py-2 text-sm hover:bg-slate-50" onclick="expandAll(false)">收起全部</button>
        <span class="mx-1 h-5 w-px bg-line"></span>
        <button class="rounded-lg bg-brand text-white px-3 py-2 text-sm hover:bg-brand/90" onclick="exportPDF()">导出 PDF</button>
        <button class="rounded-lg border border-line bg-white px-3 py-2 text-sm hover:bg-slate-50" onclick="exportWord()">导出 Word</button>
        <button class="rounded-lg border border-line bg-white px-3 py-2 text-sm hover:bg-slate-50" onclick="exportCSV()">导出 Excel(CSV)</button>
      </div>
    </div>
  </div>
</header>

<!-- ===== 顶部信息条：关键词 / 模型 / 时间戳 ===== -->
<section id="summary" class="mx-auto max-w-6xl px-6 py-6">
  <div class="page rounded-2xl border border-line bg-white shadow-card p-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- 关键词 -->
      <div class="flex items-start gap-3">
        <div class="h-10 w-10 rounded-xl bg-brand/10 text-brand grid place-content-center text-lg">🔎</div>
        <div>
          <div class="text-sm text-slate-500">当前关键词</div>
          <div class="mt-1 font-medium" id="sumKeyword">生发洗发水</div>
        </div>
      </div>
      <!-- 模型 -->
      <div class="flex items-start gap-3">
        <div class="h-10 w-10 rounded-xl bg-brand/10 text-brand grid place-content-center text-lg">🤖</div>
        <div class="min-w-0">
          <div class="text-sm text-slate-500">所使用的 AI 模型</div>
          <div class="mt-2 flex flex-wrap gap-2" id="sumModels">
            <span class="rounded-full bg-soft border border-line px-3 py-1 text-xs">ChatGPT</span>
            <span class="rounded-full bg-soft border border-line px-3 py-1 text-xs">Google AIO</span>
            <span class="rounded-full bg-soft border border-line px-3 py-1 text-xs">Perplexity</span>
          </div>
        </div>
      </div>
      <!-- 时间戳 -->
      <div class="flex items-start gap-3">
        <div class="h-10 w-10 rounded-xl bg-brand/10 text-brand grid place-content-center text-lg">⏱️</div>
        <div>
          <div class="text-sm text-slate-500">时间信息</div>
          <div class="mt-1 text-sm">
            <div>提问时间：<span id="askAt">2025-07-30 10:03:12</span></div>
            <div>回答完成：<span id="doneAt">2025-07-30 10:04:28</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== 问题列表（Accordion） ===== -->
<main id="printArea" class="mx-auto max-w-6xl px-6 pb-16 space-y-4">
  <!-- === 每个问题一个 details 面板（可复制文本、可查看图像） === -->

  <!-- 示例问题 1 -->
  <details class="page rounded-2xl border border-line bg-white shadow-card overflow-hidden" open>
    <summary class="cursor-pointer list-none">
      <div class="flex items-start justify-between gap-4 px-5 py-4">
        <div class="flex items-start gap-3">
          <div class="caret text-brand"></div>
          <div>
            <div class="text-sm text-slate-500">问题 1</div>
            <h3 class="font-semibold leading-6">生发洗发水真的有效吗？需要多长时间见效？</h3>
          </div>
        </div>
        <div class="hidden md:flex items-center gap-2 text-xs text-slate-500">
          <span class="rounded-full bg-soft border border-line px-2 py-1">模型：3</span>
          <span class="rounded-full bg-soft border border-line px-2 py-1">引用：4</span>
        </div>
      </div>
    </summary>

    <!-- 内容：模型回答 / 截图 / 引用 -->
    <div class="border-t border-line grid grid-cols-1 xl:grid-cols-3">
      <!-- 左侧：回答文本（多模型） -->
      <div class="xl:col-span-2 p-5 space-y-4">
        <!-- 单条回答卡片（可复制） -->
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">ChatGPT</div>
            <div class="text-xs text-slate-500">10:03:56</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            依据公开研究，含米诺地尔/咖啡因/生物素等配方的洗发产品多用于<strong>头皮清洁与养护</strong>，
            对**脱发的直接逆转**证据有限；通常需要 8–12 周搭配日常护理进行验证。
          </div>
        </article>

        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Google AIO</div>
            <div class="text-xs text-slate-500">10:04:06</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            AI Overview 聚合的来源显示：<u>植发医生与皮肤科协会</u>更推荐药物或医学手段，
            洗发水可作为<strong>辅助手段</strong>改善油脂、头皮炎症与发丝断裂。
          </div>
        </article>

        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Perplexity</div>
            <div class="text-xs text-slate-500">10:04:12</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            汇总测评显示多数用户反馈在<strong>2–4 周</strong>体验到清爽与蓬松，
            但新发生长与密度变化需更长期观察，且个体差异明显。
          </div>
        </article>
      </div>

      <!-- 右侧：长截图 + 引用信源 -->
      <aside class="border-t xl:border-t-0 xl:border-l border-line p-5 space-y-4">
        <!-- 截图区（JPG/PNG） -->
        <figure class="rounded-xl border border-line overflow-hidden">
          <img src="https://via.placeholder.com/1200x800.png?text=Answer+Screenshot" alt="回答长截图占位" />
          <figcaption class="p-2 text-xs text-slate-500">回答长截图（示例）</figcaption>
        </figure>

        <!-- 引用信源（高亮显示 + 可导出） -->
        <div>
          <div class="font-medium mb-2">引用与来源</div>
          <ul class="space-y-2 text-sm">
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="生发洗发水真的有效吗？需要多长时间见效？"
                data-model="ChatGPT"
                data-title="AAD 护发与脱发指南"
                data-url="https://www.aad.org/hair">
              <div class="flex items-center justify-between gap-3">
                <a href="https://www.aad.org/hair" class="text-brand hover:underline" target="_blank" rel="noreferrer">
                  AAD 护发与脱发指南
                </a>
                <span class="text-xs text-slate-500">ChatGPT</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://www.aad.org/hair</div>
            </li>

            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="生发洗发水真的有效吗？需要多长时间见效？"
                data-model="Google AIO"
                data-title="皮肤科协会立场声明"
                data-url="https://example.org/derm-position">
              <div class="flex items-center justify-between gap-3">
                <a href="https://example.org/derm-position" class="text-brand hover:underline" target="_blank" rel="noreferrer">
                  皮肤科协会立场声明
                </a>
                <span class="text-xs text-slate-500">Google AIO</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.org/derm-position</div>
            </li>

            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="生发洗发水真的有效吗？需要多长时间见效？"
                data-model="Perplexity"
                data-title="消费者使用报告（2024）"
                data-url="https://example.com/consumer-report-2024">
              <div class="flex items-center justify-between gap-3">
                <a href="https://example.com/consumer-report-2024" class="text-brand hover:underline" target="_blank" rel="noreferrer">
                  消费者使用报告（2024）
                </a>
                <span class="text-xs text-slate-500">Perplexity</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/consumer-report-2024</div>
            </li>

            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="生发洗发水真的有效吗？需要多长时间见效？"
                data-model="Perplexity"
                data-title="双盲对照试验：咖啡因洗发水"
                data-url="https://doi.org/10.1234/caffeine-shampoo">
              <div class="flex items-center justify-between gap-3">
                <a href="https://doi.org/10.1234/caffeine-shampoo" class="text-brand hover:underline" target="_blank" rel="noreferrer">
                  双盲对照试验：咖啡因洗发水
                </a>
                <span class="text-xs text-slate-500">Perplexity</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://doi.org/10.1234/caffeine-shampoo</div>
            </li>
          </ul>

          <!-- 单问题导出（可选） -->
          <div class="no-print mt-3 flex items-center gap-2">
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportWord('#q1')">导出此问题 Word</button>
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportCSV('#q1')">导出此问题 CSV</button>
          </div>
        </div>
      </aside>
    </div>
    <!-- 用于单题导出的定位锚点 -->
    <div id="q1"></div>
  </details>

  <!-- 示例问题 2 -->
  <details class="page rounded-2xl border border-line bg-white shadow-card overflow-hidden">
    <summary class="cursor-pointer list-none">
      <div class="flex items-start justify-between gap-4 px-5 py-4">
        <div class="flex items-start gap-3">
          <div class="caret text-brand"></div>
          <div>
            <div class="text-sm text-slate-500">问题 2</div>
            <h3 class="font-semibold leading-6">对油性头皮更友好的生发洗发水如何选择？</h3>
          </div>
        </div>
        <div class="hidden md:flex items-center gap-2 text-xs text-slate-500">
          <span class="rounded-full bg-soft border border-line px-2 py-1">模型：3</span>
          <span class="rounded-full bg-soft border border-line px-2 py-1">引用：3</span>
        </div>
      </div>
    </summary>

    <div class="border-t border-line grid grid-cols-1 xl:grid-cols-3">
      <div class="xl:col-span-2 p-5 space-y-4">
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">ChatGPT</div>
            <div class="text-xs text-slate-500">10:04:20</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            关注控油成分（如水杨酸、锌 PCA、烟酰胺），避免过度清洁；每周 2–3 次为宜。
          </div>
        </article>
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Google AIO</div>
            <div class="text-xs text-slate-500">10:04:26</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            搜索聚合显示：多数评测更推荐温和表活 + 去屑配方的组合。
          </div>
        </article>
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Perplexity</div>
            <div class="text-xs text-slate-500">10:04:31</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            使用者反馈中，减少头皮瘙痒与头屑的组合更受欢迎。
          </div>
        </article>
      </div>

      <aside class="border-t xl:border-t-0 xl:border-l border-line p-5 space-y-4">
        <figure class="rounded-xl border border-line overflow-hidden">
          <img src="https://via.placeholder.com/1200x800.jpg?text=Answer+Screenshot" alt="回答长截图占位" />
          <figcaption class="p-2 text-xs text-slate-500">回答长截图（示例）</figcaption>
        </figure>

        <div>
          <div class="font-medium mb-2">引用与来源</div>
          <ul class="space-y-2 text-sm">
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="对油性头皮更友好的生发洗发水如何选择？"
                data-model="ChatGPT"
                data-title="控油与头皮微生态综述"
                data-url="https://example.com/sebum-review">
              <div class="flex items-center justify-between gap-3">
                <a class="text-brand hover:underline" target="_blank" href="https://example.com/sebum-review">控油与头皮微生态综述</a>
                <span class="text-xs text-slate-500">ChatGPT</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/sebum-review</div>
            </li>
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="对油性头皮更友好的生发洗发水如何选择？"
                data-model="Google AIO"
                data-title="去屑配方白皮书"
                data-url="https://example.com/anti-dandruff-whitepaper">
              <div class="flex items-center justify-between gap-3">
                <a class="text-brand hover:underline" target="_blank" href="https://example.com/anti-dandruff-whitepaper">去屑配方白皮书</a>
                <span class="text-xs text-slate-500">Google AIO</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/anti-dandruff-whitepaper</div>
            </li>
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="对油性头皮更友好的生发洗发水如何选择？"
                data-model="Perplexity"
                data-title="消费者口碑数据集"
                data-url="https://example.com/user-reviews">
              <div class="flex items-center justify-between gap-3">
                <a class="text-brand hover:underline" target="_blank" href="https://example.com/user-reviews">消费者口碑数据集</a>
                <span class="text-xs text-slate-500">Perplexity</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/user-reviews</div>
            </li>
          </ul>
          <div class="no-print mt-3 flex items-center gap-2">
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportWord('#q2')">导出此问题 Word</button>
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportCSV('#q2')">导出此问题 CSV</button>
          </div>
        </div>
      </aside>
    </div>
    <div id="q2"></div>
  </details>

  <!-- 示例问题 3（可继续复制结构追加更多） -->
  <details class="page rounded-2xl border border-line bg-white shadow-card overflow-hidden">
    <summary class="cursor-pointer list-none">
      <div class="flex items-start justify-between gap-4 px-5 py-4">
        <div class="flex items-start gap-3">
          <div class="caret text-brand"></div>
          <div>
            <div class="text-sm text-slate-500">问题 3</div>
            <h3 class="font-semibold leading-6">与同价位竞品相比，生发洗发水的核心差异是什么？</h3>
          </div>
        </div>
        <div class="hidden md:flex items-center gap-2 text-xs text-slate-500">
          <span class="rounded-full bg-soft border border-line px-2 py-1">模型：3</span>
          <span class="rounded-full bg-soft border border-line px-2 py-1">引用：2</span>
        </div>
      </div>
    </summary>

    <div class="border-t border-line grid grid-cols-1 xl:grid-cols-3">
      <div class="xl:col-span-2 p-5 space-y-4">
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">ChatGPT</div>
            <div class="text-xs text-slate-500">10:04:40</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            成分配方（药妆/功效）、表活体系、头皮友好度与可持续包装是主要差异维度。
          </div>
        </article>
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Google AIO</div>
            <div class="text-xs text-slate-500">10:04:47</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            AI Overview 中显示的电商评分、医生社区意见与测评媒体总结构成决策主线。
          </div>
        </article>
        <article class="rounded-xl border border-line p-4">
          <header class="flex items-center justify-between">
            <div class="font-medium">Perplexity</div>
            <div class="text-xs text-slate-500">10:04:53</div>
          </header>
          <div class="mt-2 text-sm leading-6">
            口碑数据对“气味/起泡/冲洗感”的权重更高，长期生发证据仍有限。
          </div>
        </article>
      </div>

      <aside class="border-t xl:border-t-0 xl:border-l border-line p-5 space-y-4">
        <figure class="rounded-xl border border-line overflow-hidden">
          <img src="https://via.placeholder.com/1200x800.png?text=Answer+Screenshot" alt="回答长截图占位" />
          <figcaption class="p-2 text-xs text-slate-500">回答长截图（示例）</figcaption>
        </figure>

        <div>
          <div class="font-medium mb-2">引用与来源</div>
          <ul class="space-y-2 text-sm">
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="与同价位竞品相比，生发洗发水的核心差异是什么？"
                data-model="Google AIO"
                data-title="大型评测媒体横评"
                data-url="https://example.com/comparison-review">
              <div class="flex items-center justify-between gap-3">
                <a class="text-brand hover:underline" target="_blank" href="https://example.com/comparison-review">大型评测媒体横评</a>
                <span class="text-xs text-slate-500">Google AIO</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/comparison-review</div>
            </li>
            <li class="citation rounded-lg border border-brand/30 bg-brand/5 px-3 py-2"
                data-question="与同价位竞品相比，生发洗发水的核心差异是什么？"
                data-model="Perplexity"
                data-title="用户口碑数据库（电商）"
                data-url="https://example.com/ecom-opinions">
              <div class="flex items-center justify-between gap-3">
                <a class="text-brand hover:underline" target="_blank" href="https://example.com/ecom-opinions">用户口碑数据库（电商）</a>
                <span class="text-xs text-slate-500">Perplexity</span>
              </div>
              <div class="text-xs text-slate-500 truncate">https://example.com/ecom-opinions</div>
            </li>
          </ul>
          <div class="no-print mt-3 flex items-center gap-2">
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportWord('#q3')">导出此问题 Word</button>
            <button class="rounded-lg border border-line bg-white px-3 py-1.5 text-xs hover:bg-slate-50" onclick="exportCSV('#q3')">导出此问题 CSV</button>
          </div>
        </div>
      </aside>
    </div>
    <div id="q3"></div>
  </details>
</main>

<!-- ===== 简易 Toast ===== -->
<div id="toast" class="fixed left-1/2 top-20 -translate-x-1/2 hidden">
  <div class="rounded-full bg-black/80 text-white text-xs px-3 py-2 shadow-card">已完成</div>
</div>

<!-- ===== 脚本：导出/展开/收起/提示 ===== -->
<script>
  // --- 展开 / 收起全部 ---
  function expandAll(open=true){
    document.querySelectorAll('main details').forEach(d => d.open = !!open);
  }

  // --- 导出为 PDF（打印） ---
  function exportPDF(){
    expandAll(true);                     // 打印前展开
    setTimeout(()=>window.print(), 50);  // 触发打印（用户可选“另存为 PDF”）
  }

  // --- 导出 Word（将指定区域的 HTML 包裹为 .doc） ---
  function exportWord(scopeSelector){
    const scope = scopeSelector ? document.querySelector(scopeSelector).closest('details') : document.getElementById('printArea');
    const clone = scope.cloneNode(true);

    // Word 里不需要按钮
    clone.querySelectorAll('.no-print').forEach(n => n.remove());

    const html =
`<!DOCTYPE html><html><head><meta charset="utf-8">
<style>
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%}
summary{font-weight:600}
</style>
</head><body>${document.getElementById('summary').outerHTML}${clone.outerHTML}</body></html>`;

    const blob = new Blob(['\ufeff', html], {type: 'application/msword'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = scopeSelector ? 'question.doc' : 'ai-results.doc';
    a.click();
    URL.revokeObjectURL(url);
    toast('已导出 Word');
  }

  // --- 导出 CSV（Excel 可打开）：汇总 citation 列表 ---
  function exportCSV(scopeSelector){
    const root = scopeSelector
      ? document.querySelector(scopeSelector).closest('details')
      : document.getElementById('printArea');

    const rows = [['问题','模型','标题','URL']]; // 表头
    root.querySelectorAll('.citation').forEach(c => {
      rows.push([
        (c.dataset.question || '').replace(/\n/g,' ').trim(),
        c.dataset.model || '',
        c.dataset.title || '',
        c.dataset.url || ''
      ]);
    });

    const csv = rows.map(r => r.map(cell => `"${String(cell).replace(/"/g,'""')}"`).join(',')).join('\n');
    const blob = new Blob(['\ufeff', csv], {type:'text/csv;charset=utf-8;'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = scopeSelector ? 'question.csv' : 'citations.csv';
    a.click();
    URL.revokeObjectURL(url);
    toast('已导出 CSV');
  }

  // --- 小提示 ---
  function toast(msg){
    const t = document.getElementById('toast');
    t.querySelector('div').textContent = msg;
    t.classList.remove('hidden');
    clearTimeout(t._timer);
    t._timer = setTimeout(()=> t.classList.add('hidden'), 1400);
  }
</script>
</body>
</html>
